take(count)

RxJS官網-take

• 從彈珠圖來看，count=2，代表我們從observable中僅需要2筆資料，取得2筆之後，就不再接收任何資料了。

case1: take基本式

• 設計一個資料流，限定2個資料通過即停止。

stackblitz

import { from, take, fromEvent, map } from 'rxjs';

// 建立觀察者
const observer = {
  next: console.log,
  complete: () => console.log('completed!'),
};

// case1: take(2)
console.log('=== case1: take(2) ===)');
from([1, 2, 3, 4, 5]).pipe(take(2)).subscribe(observer);

// 輸出
// 1
// 2
// completed!

case2: fromEvent + take

• 擷取click event，然後限定只能點擊3次，並輸出clientX/Y

stackblitz

...
// case2: fromEvent
console.log('=== case2: fromEvent + take(3) ===)');
fromEvent(document, 'click')
  .pipe(
    take(3),
    map((event: MouseEvent) => {   // retrieve clientX/Y
      return { x: event.clientX, y: event.clientY };
    })
  )
  .subscribe(observer);

✍Recap

• take(N): 設置count = N，就會依序從資料流中取得N筆資料後，結束。
• take與fromEvent搭配，可以設計出不同的使用者操作形式。

第17天完工，今天的課程很簡單，讓大家稍微放鬆一下(我也可以偷懶一下)，明天我們繼續囉!see ya~